<!-- templates/page/page1.html -->

{% extends 'success.html' %}

{% block content %}
  <style>
    .course-image img {
      width: 200px; /* 设置图片宽度，根据需要调整 */
      height: auto; /* 自动计算高度，保持图片比例 */
    }

        table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
    }

    th, td {
      border: 1px solid #3498db; /* 使用蓝色边框 */
      padding: 8px;
      text-align: left;
    }

    th {
      background-color: #3498db; /* 使用蓝色背景 */
      color: white;
    }

    h2, h3 {
      color: #3498db; /* 使用蓝色文字 */
    }

    form {
      margin-bottom: 20px;
    }

    label {
      display: block;
      margin-bottom: 8px;
    }

    input {
      width: 80%;
      padding: 8px;
      margin-bottom: 12px;
      box-sizing: border-box;
    }

    button {
      background-color: #3498db; /* 使用蓝色背景 */
      color: white;
      padding: 10px;
      border: none;
      cursor: pointer;
    }

    button:hover {
      background-color: #2980b9; /* 鼠标悬停时的深蓝色 */
    }
  </style>

  <h2>课程列表</h2>

  <form method="get" action="{% url 'search_courses_type' %}">
    <label for="search_query">搜索课程：</label>
    <input type="text" id="search_query" name="search_query" value="{{ request.GET.search_query }}">
    <button type="submit">搜索</button>
    {% if request.GET.search_query %}
      <a href="{% url 'page1' %}">取消搜索</a>
    {% endif %}
  </form>

  <table>
    <thead>
      <tr>
        <th>课程编号</th>
        <th>课程名称</th>
        <th>课时数</th>
        <th>课程类型</th>
        <th>课程状态</th>
        <th>要求</th>
        <th>学分</th>
        <th>备注</th>
        <th>书本封面</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      {% for course in courses %}
        <tr>
          <td>{{ course.course_no }}</td>
          <td>{{ course.course_name }}</td>
          <td>{{ course.course_hours }}</td>
          <td>{{ course.type_id }}</td>
          <td>{{ course.course_status }}</td>
          <td>{{ course.course_reqs }}</td>
          <td>{{ course.course_point }}</td>
          <td>{{ course.course_memo }}</td>
          <td>
            {% if course.encoded_image %}
              <div class="course-image">
                <img src="data:image/png;base64,{{ course.encoded_image }}" alt="课本封面">
              </div>
            {% else %}
              暂无图片
            {% endif %}
          </td>
          <td>
            <a href="{% url 'edit_course' course.course_no %}">编辑</a>
            <a href="{% url 'delete_course' course.course_no %}">删除</a>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

  <div class="pagination">
    <span class="step-links">
      {% if courses.has_previous %}
        <a href="?page=1">&laquo; 首页</a>
        <a href="?page={{ courses.previous_page_number }}">上一页</a>
      {% endif %}

      <span class="current">
        第 {{ courses.number }} 页，共 {{ courses.paginator.num_pages }} 页.
      </span>

      {% if courses.has_next %}
        <a href="?page={{ courses.next_page_number }}">下一页</a>
        <a href="?page={{ courses.paginator.num_pages }}">尾页 &raquo;</a>
      {% endif %}
    </span>
  </div>
<h2>导出课程数据到Excel</h2>
  <form method="get" action="{% url 'export_to_excel' %}">
    <button type="submit" style="background-color: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer; border-radius: 4px;">
      导出到Excel
    </button>
  </form>
  <h2>添加课程</h2>
  <form method="post" enctype="multipart/form-data">
    {% csrf_token %}
    <label for="id_course_no">课程编号：</label>
    {{ add_course_form.course_no }}
    <br>
    <label for="id_course_name">课程名称：</label>
    {{ add_course_form.course_name }}
    <br>
    <label for="id_course_hours">课时数：</label>
    {{ add_course_form.course_hours }}
    <br>
    <label for="id_type_id">课程类型：</label>
    {{ add_course_form.type_id }}
    <br>
    <label for="id_course_status">课程状态：</label>
    {{ add_course_form.course_status }}
    <br>
    <label for="id_course_reqs">要求：</label>
    {{ add_course_form.course_reqs }}
    <br>
    <label for="id_course_point">学分：</label>
    {{ add_course_form.course_point }}
    <br>
    <label for="id_course_memo">备注：</label>
    {{ add_course_form.course_memo }}
    <br>
    <label for="id_course_textbook_pic">书本封面：</label>
    {{ add_course_form.course_textbook_pic }}
    <input type="file" name="course_textbook_pic">  {# 添加文件输入框 #}
    <br>
    <button type="submit">添加课程</button>
  </form>

  <h2>删除课程</h2>
  <form method="post">
    {% csrf_token %}
    {{ delete_course_form.as_p }}
    <button type="submit">删除课程</button>
  </form>
{% endblock %}
